<template>
  <div v-loading="loading" class="home" style="height: 100%">
    <div class="left" style="width: 300px; margin-bottom: 20px">
      <el-button size="mini" @click="dialogVisible = true" type="primary">创建着陆页</el-button>
    </div>
    <div style="height: 100%">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="page_name" label="着陆页名称"> </el-table-column>
        <el-table-column prop="page_type" label="页面类型"> </el-table-column>
        <el-table-column prop="page_url" label="地址链接/路径"> </el-table-column>
        <el-table-column label="预览二维码（无参数）" width="150">
          <template #default="scope">
            <div class="wc">
              <img style="width:120px;height:120px;" :src="scope.row.page_url_code" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button @click="editTableRow(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteAdLandingPage(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleChange"
        :total="total"
        :page-size="per"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="添加广告素材"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div class="bt hc" style="height: 50px">
        <div style="width: 100px">页面名称</div>
        <el-input
          class="flex1"
          v-model="form.page_name"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="bt hc" style="height: 50px">
        <div style="width: 100px">页面类型</div>
        <div class="flex1">
          <el-radio v-for="(val,key) in page_type_list" :key="key" v-model="form.page_type_en" :label="val.page_type_en">{{val.page_type}}</el-radio>
        </div>
      </div>
      <div class="bt hc" style="height: 50px">
        <div style="width: 100px">页面地址</div>
        <el-input
          class="flex1"
          v-model="form.page_url"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSure()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { defineComponent,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'
  export default defineComponent({
    setup() {
      const { proxy } = getCurrentInstance()
      const data = reactive({
        loading:true,
        form: {},
        page: 1,
        per: 10,
        tableData: [],
        dialogVisible: false,
        total: 0,
        page_type_list:[{
          page_type:"h5",
          page_type_en:"h5"
        },{
          page_type:"主小程序",
          page_type_en:"miniapp"
        }]
      })
      watch(() => data.form, value => {
        data.form.page_type = (data.page_type_list.find(val=>val.page_type_en===value.page_type_en)||{}).page_type
      })
      onMounted(() => {
        pageInfoReload();
      })
      const editTableRow = (row) => {
        data.form = row;
        data.dialogVisible = true;
      }
      const onSure = () => {
        if (data.form.id) {
          tableRowUpdate()
        }else{
          landingPageCreate()
        }
      }
      const tableRowUpdate = async () => {
        data.loading = true;
        await proxy.$post("v1/ad_landing_page/update", data.form);
        data.loading = false;
        data.dialogVisible = false;
        pageInfoReload()
        proxy.$message("更新成功");
      }
      const handleClose = (done) => {}
      const pageInfoReload = async () => {
        data.loading = true;
        let res = await proxy.$get("v1/ad_landing_page/list", {
          page: data.page,
          per: data.per,
        });
        data.loading = false;
        data.tableData = res.data.list;
        data.total = res.data.count;
      }
      const landingPageCreate = async () => {
        data.loading = true;
        await proxy.$post("v1/ad_landing_page/create", data.form);
        data.loading = false;
        data.dialogVisible = false;
        data.form = {};
        await pageInfoReload();
        proxy.$message("添加成功");
      }
      const gotoPage = (url) => {
        if (url) {
          window.location.href = url;
        }
      }
      const deleteAdLandingPage = async (ad) => {
        data.loading = true;
        await proxy.$post("v1/ad_landing_page/delete", { id: ad.id });
        data.loading = false;
        pageInfoReload();
      }
      const handleChange = value => {
        data.page = value;
        adListReload();
      }
      const openPage = url => {
        if (url) {
          window.open(url);
        }
      }
      return {
        ...toRefs(data),
        editTableRow,
        onSure,
        tableRowUpdate,
        handleClose,
        landingPageCreate,
        gotoPage,
        deleteAdLandingPage,
        handleChange,
        openPage
      };
    }
  })
</script>
